<template>
  <!-- 初始化一个div框架盒子 -->
  <div class="app">
    <h2>Vue 路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <!-- 通过名称跳转 -->
      <RouterLink :to="{name:'zhuye'}" active-class="active" class="navigateButton">首页</RouterLink>
      <RouterLink to="/news" active-class="active" class="navigateButton">新闻</RouterLink>
      <!-- to 通过path 的第二种写法 -->
      <RouterLink :to="{path:'/about'}" active-class="active" class="navigateButton">关于</RouterLink>
    </div>
  </div>

  <!-- 展示区 -->
  <div class="main-content">
    <RouterView></RouterView>
  </div>

</template>

<script lang="ts" setup name="App">
import {RouterView,RouterLink} from 'vue-router'




</script>

<style>
/**
  .app{
    background-color: aliceblue;
    box-shadow: 0 0  10px;
    border-radius: 10px;
    padding: 20px;
  }
    **/
    .active{
      border: 2px solid palegreen;
    }

    .navigateButton{
      margin-left: 100px;
      width: 300px;
      height: 80px;
      font-size: 18px;
      background-color: brown;
    }

    .content{
      width: 1024px;
      height: 900px;
    }
.container {
  width: 600px;
  height: 300px;
  float: left;
  margin-right: 60px;
}
</style>